<template>
  <div style="padding: 3px">
    <div v-if="edit">
      <EditQuestion
        :q="q"
        @up="$emit('up')"
        @down="$emit('down')"
        @del="$emit('del')"
        />
    </div>
    <div v-if="show || apply">
<!--      <ShowQuestion-->
<!--        :q="q"-->
<!--        />-->
      <div>
        <div class="show-question-div">
          <div class="question-title-div">
            <span class="question-title-left">{{qIndex}}{{q.title}}</span>
            <span class="question-title-right" v-show="sta">
              <el-button plain round size="small" @click="$emit('sta')">统计</el-button>
            </span>
          </div>
          <div class="question-content-div">
            <!--        填空题-->
            
            <div v-if="isBlank">
              <el-input
                  :disabled="show"
                  placeholder="输入框"
                  v-model="q.ans"
                  maxlength="100"
              />
            </div>
            
            <div v-if="isSingle">
              <van-radio-group v-model="q.ans" :disabled="show">
                <div v-for="(item,index) in q.options" class="question-option-div">
                  <van-radio
                      :name="item.oId===null?index:item.oId"
                  >
                    {{item.info}}
                  </van-radio>
                </div>
              </van-radio-group>
            </div>
            
            <div v-if="isMulti">
              <van-checkbox-group v-model="q.ans" shape="square" :disabled="show">
                <div v-for="(item,index) in q.options" class="question-option-div">
                  <van-checkbox
                      :name="item.oId===null?index:item.oId"
                  >
                    {{item.info}}
                  </van-checkbox>
                </div>
              
              </van-checkbox-group>
            </div>
          
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
import {defineComponent} from 'vue'
import DBConst from "@/consts/DBConst";
import EditQuestion from "@/views/act/components/EditQuestion.vue";


export default defineComponent({
  components: { EditQuestion},
  setup(){
    return {
      QTYPE: DBConst.QType
    }
  },
  name: "QuestionItem",
  props: {
    q: Object,
    index: {
      type: Number,
      default: -1
    },
    edit: {
      type: Boolean,
      default: false
    },
    apply: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: false
    },
    sta: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    qIndex(){
      if(this.index > 0){
        return `${this.index}. `
      }else return ''
    },
    isBlank(){
      return this.q.type === DBConst.QType.BLANK
    },
    isSingle(){
      return this.q.type === DBConst.QType.SINGLE
    },
    isMulti(){
      return this.q.type === DBConst.QType.MULTI
    }
  }
})
</script>

<style scoped lang="less">
@import "@/assets/style/less/all.less";
.show-question-div {
  display: flex;
  flex-direction: column;
  >.question-title-div{
    font-size: 16px;
    font-weight: bolder;
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
    >.question-title-left{
      .flex-item-fit-width();
    }
    >.question-title-right{
      .flex-item-fix();
    }
  }
  >.question-content-div{
    margin-left: 5px;
  }
}
.question-option-div{
  margin: 3px 0;
}
</style>